<template>
  <div class="tuijian">
    <!-- 下拉刷新 -->
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <!-- 轮播图 -->
      <van-swipe :autoplay="3000" class="banner">
        <van-swipe-item v-for="(image, index) in banImages" @click="clickbanner">
          <img :src="image.pic" />
        </van-swipe-item>
      </van-swipe>

      <!-- 歌单列表 -->
      <div class="songList">
        <span class="songList-title">推荐歌单</span>
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
          <template v-for="(item, index) in bufensonglist">
            <router-link
              :to="{path:'/tuijian/tuijiandetail/id',
        query:{id:item.id,title:item.name,src:item.picUrl}}"
            >
              <div class="songList-song">
                <span class="playcount">
                  <van-icon name="service-o" />
                  {{item.playCount|countnum}}
                </span>
                <img :src="item.picUrl" />
                <!-- </router-link> -->
                <span class="discription">{{item.name}}</span>
              </div>
            </router-link>
          </template>
        </van-list>
      </div>
    </van-pull-refresh>
  </div>
</template>

<script>
import send from "../navshow";
import player from "../components/player";
export default {
  // inject:['reload'],
  data() {
    return {
      banImages: [], //轮播图片
      songlist: [], //推荐歌单
      bufensonglist: [], //部分歌单
      loading: false,
      finished: false,
      isLoading: false,
      songdetail: [], //获取歌曲详情
      src: [] //获取歌曲播放地址
    };
  },
  created() {
    send.$emit("tab-show", true); //显示导航栏

    // 显示播放器
    this.$store.commit("showplayer", true);

    // 轮播图片
    this.axios.get("http://localhost:3000/banner?type=1").then(res => {
      this.banImages = res.data.banners;
    });

    // 推荐歌单
    this.axios.get("http://localhost:3000/personalized").then(res => {
      this.songlist = res.data.result;
      this.bufensonglist = res.data.result.slice(0, 6);
    });

    // 获取歌曲详情
    var detail = "http://localhost:3000/song/detail?ids=" + this.$store.state.id;
    this.axios.get(detail).then(res => {
      this.songdetail = res.data.songs[0];
    });

    //获取歌曲播放地址
    if (this.$store.state.id != null) {
      var url = "http://localhost:3000/song/url?id=" + this.$store.state.id;
      this.axios.get(url).then(res => {
        this.src = res.data.data[0].url;
      });
    }
  },

  methods: {
    onLoad() {
      // 异步更新数据
      setTimeout(() => {
        for (let i = 0; i < 6; i++) {
          this.bufensonglist.push(this.songlist[this.bufensonglist.length + 1]);
        }
        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.bufensonglist.length >= 24) {
          this.finished = true;
        }
      }, 1000);
    },

    // 下拉刷新
    onRefresh() {
      setTimeout(() => {
        this.$toast("刷新成功");
        this.isLoading = false;
        this.count++;
      }, 1000);
    },

    // 点击背景图
    clickbanner() {
      var date=new Date()
        this.axios({
          url: `http://120.26.184.71:3000/recommend/resource`,
          withCredentials: true //关键
        }).then(function(res) {
          console.log(res.data);
        });
      // });
    }
  },
  // 将播放数量进行优化
  filters: {
    countnum(value) {
      if (value / 10000 > 10000) {
        var resultvalue = (value / 100000000).toFixed(2) + "亿";
      } else if (value / 10000 > 100) {
        var resultvalue = (value / 10000).toFixed(0) + "万";
      } else {
        var resultvalue = (value / 10000).toFixed(1) + "万";
      }
      return resultvalue;
    }
  },
  mounted() {
    // this.reload()
  }
};
</script>

<style>
/* 全部 */
.tuijian {
  position: relative;
  top: 70px;
  background: linear-gradient(180deg, #222831, #faf8f8 25%);
}

/* 轮播图 */
.tuijian .banner {
  width: 80%;
  height: 120px;
  margin: auto;
  border-radius: 10px;
  margin-top: 15px;
}

.tuijian .banner img {
  width: 100%;
  height: 100%;
}

/* 推荐歌单 */
.tuijian .songList {
  margin-left: 10vw;
}

.tuijian .songList-title {
  display: block;
  font-size: 20px;
  color: #222831;
  font-weight: bold;
  border-left: 5px #c20c0c solid;
  margin-top: 20px;
  padding-left: 10px;
}

.tuijian .van-list {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.tuijian .songList-song {
  width: 35vw;
  height: 150px;
  margin-top: 20px;
  position: relative;
}

.tuijian .songList-song:nth-of-type(odd) {
  margin-right: 10vw;
}

.playcount {
  position: absolute;
  top: 5px;
  left: 54%;
  color: white;
  font-size: 12px;
}

.tuijian .songList-song img {
  width: 100%;
  height: 120px;
  border-radius: 5px;
  /* height: 100%; */
}

.tuijian .songList-song .discription {
  display: block;
  width: 100%;
  font-size: 12px;
  height: 20px;
  color: #222831;
}
</style>